<template>
    <div class="scale-page">
        <view class="scale-page-list">
            <view v-for="item in list" :key="item.index" class="spl-item">
                <view class="spl-index">{{ item.index }}</view>
                <view class="spl-name">{{ item.name }}</view>
                <view class="spl-age">{{ item.age }}</view>
                <view class="spl-address">{{ item.address }}</view>
            </view>
        </view>
    </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
type Item = {
    index: number
    id: string
    name: string
    age: number
    address: string
}
const list = ref<Item[]>([])
onMounted(() => {
    list.value = new Array(50).fill(null).map((_, index) => {
        const nowTime = new Date().getTime()
        return {
            index,
            id: (Math.floor(Math.random() * 10000) + nowTime).toString(16),
            name: '张三',
            age: Math.floor(Math.random() * 100),
            address: (Math.floor(Math.random() * 10000) * nowTime).toString(16),
        }
    })
})
</script>
<style lang="scss" scoped>
.scale-page {
    height: 200px;
    // max-height: 100%;
    // overflow-y: auto;
    .scale-page-list {
        height: fit-content;
        display: flex;
        flex-direction: column;
        transform: scale(0.5);
        transform-origin: left top; 
        transform-style: flat;
        .spl-item {
            display: flex;
            align-items: center;
            margin-top: 6px;
            height: 40px;
            width: 200%;
            padding: 0 10px;
            font-size: 32px;
            background-image: linear-gradient(to bottom, #ccc, transparent 50%, #ccc);
            .spl-index {
                width: 80px;
            }
            .spl-name {
                width: 100px;
            }
            .spl-age {
                width: 100px;
            }
            .spl-address {
                flex: 1;
            }
        }
    }
}
</style>
